<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    onShareAppMessage
    :showFloatButton="true"
  >
    <!-- <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
      <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
    </s-block> -->

    <!-- 新的 我的页面 -->
    <view
      class=""
      style="
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: -1;
        background: #d64d4a;
        height: 500rpx;
      "
    >
      <!-- <image
        style="width: 100%; height: 500rpx"
        src="/static/my/my-bg.jpg"
        mode="aspectFill"
      ></image> -->
    </view>
    <view class="my-wrap">
<!--      <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>-->
      <image class="avatar" :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            " mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
      <view class="info-wrap">
        <view class="nickname">
          {{ userInfo?.nickname}}
          <image v-if="userInfo.parent_user_id != null" class="partner" src="/static/icon/partner.png" mode="aspectFill"></image>
        </view>
        <view class="" style="font-size: 24rpx">ID：242424242</view>
        <view class="level-wrap" v-if="userInfo.parent_user_id">
          <text>保级进度：</text>
          <view class="progress-box">
            <progress activeColor="#fff" percent="80" />
          </view>
          <text>9782.10/2000元</text>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="title">
        <view class="">我的订单</view>
        <view @tap="sheep.$router.go('/pages/order/list', { type: '0' })" class="more">
          <text>全部订单</text>
          <uni-icons color="#999" type="arrowright"></uni-icons>
        </view>
      </view>

      <view class="nav-list">
        <view v-for="item in orderMap" :key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })" class="nav-item order">
          <uni-badge :text="numData.order_num[item.type]" absolute="rightTop" size="small">
            <image
                class="nav-icon order"
                :src="item.value==4? item.icon:sheep.$url.static(item.icon)"
                mode="aspectFill"
            ></image>
          </uni-badge>
          <view class="nav-title">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <view class="imgs" v-if="userInfo.group_id != 1">
      <image class="img" src="/static/my/ad-1.png" mode="aspectFill" @tap="sheep.$router.go('/pages/pay/withdraw')"></image>
      <image class="img" src="/static/my/ad-2.png" mode="aspectFill" @tap="showShareModal"></image>
    </view>

    <view class="card">
      <view class="title">
        <view class="">我的工具</view>
      </view>

      <view class="nav-list">
        <view v-for="(item, index) in navList" :key="index" class="nav-item">
          <view v-if="!item.role" class="nav-item-c" @tap="handleNav(item)">
            <image class="nav-icon" :src="item.icon" mode="aspectFill"></image>
            <view class="nav-title">{{ item.label }}</view>
          </view>
          <view v-if="item.role && userInfo.group_id != 1" class="nav-item-c" @tap="handleNav(item)">
            <image class="nav-icon" :src="item.icon" mode="aspectFill"></image>
            <view class="nav-title">{{ item.label }}</view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $store from "@/sheep/store";
  import {
    showShareModal,
  } from '@/sheep/hooks/useModal';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const numData = computed(() => sheep.$store('user').numData);

  const orderMap = [
    {
      title: '待付款',
      value: '1',
      icon: '/assets/addons/shopro/uniapp/order/no_pay.png',
      path: '/pages/order/list',
      type: 'unpaid',
    },
    {
      title: '待发货',
      value: '2',
      icon: '/assets/addons/shopro/uniapp/order/no_take.png',
      path: '/pages/order/list',
      type: 'nosend',
    },
    {
      title: '待收货',
      value: '3',
      icon: '/assets/addons/shopro/uniapp/order/no_comment.png',
      path: '/pages/order/list',
      type: 'noget',
    },
    {
      title: '已完成',
      value: '4',
      icon: '/static/my/receiving.png',
      path: '/pages/order/list',
      type: 'nocomment',
    },
    {
      title: '售后单',
      value: '0',
      icon: '/assets/addons/shopro/uniapp/order/change_order.png',
      path: '/pages/order/aftersale/list',
      type: 'aftersale',
    },

  ];

  const navList = ref([
    { icon: '/static/my/tool-0.png', label: '储值余额', url: '/pages/pay/recharge' },
    { icon: '/static/my/tool-9.png', label: '我的关注', url: '/pages/user/goods-collect' },
    { icon: '/static/my/tool-8.png', label: '物流查询', url: '/pages/user/logistics/index' },
    // { icon: '/static/my/tool-1.png', label: '我的团队' },
    // { icon: '/static/my/tool-2.png', label: '我的业绩' },
    { icon: '/static/my/tool-3.png', label: '地址管理', url: '/pages/user/address/list' },
    { icon: '/static/my/tool-4.png', label: '官方客服', url: '/pages/chat/index' },
    { icon: '/static/my/tool-5.png', label: '操作指南', url: '/pages/public/faq' },
    { icon: '/static/my/tool-11.png', label: '分销中心', url: '/pages/commission/index' },
    // { icon: '/static/my/tool-7.png', label: '退出帐号' },
    { icon: '/static/my/tool-6.png', label: '商城管理', role: 'admin' },
    // { icon: '/static/my/tool-10.png', label: '我的售后', url: '/pages/commission/index' },

  ]);

  const handleNav = (item) => {
    if(item.label === '商城管理') {
      toManage();
      return;
    }
    if (item.url) {
      sheep.$router.go(item.url);
    }
  };

  function toManage() {
    uni.redirectTo({
      url:'/manage/pages/home/index'
    })
    const tabbar = {
      "mode": 1,
      "layout": 1,
      "inactiveColor": "#8C8C8C",
      "activeColor": "#3A43FF",
      "list": [{
        "inactiveIcon": "/manage/static/home.png",
        "activeIcon": "/manage/static/home-s.png",
        "url": "/manage/pages/home/index",
        "text": "首页"
      }, {
        "inactiveIcon": "/manage/static/order.png",
        "activeIcon": "/manage/static/order-s.png",
        "url": "/manage/pages/order/index",
        "text": "订单"
      }, {
        "inactiveIcon": "/manage/static/goods.png",
        "activeIcon": "/manage/static/goods-s.png",
        "url": "/manage/pages/goods/index",
        "text": "商品"
      }],
      "background": {
        "type": "color",
        "bgImage": "",
        "bgColor": "#FFFFFF"
      }
    }
    uni.setStorageSync('isManage',true)
    uni.setStorageSync('manageTabbar',tabbar)
  }

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template.user);
  const isLogin = computed(() => sheep.$store('user').isLogin);

  onShow(() => {
    sheep.$store('user').updateUserData();
  });

  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style>
  page {
    background: #f6f6f6;
  }
</style>
<style scoped lang="scss">
  .my-wrap {
    display: flex;
    align-items: center;
    padding: 32rpx;
    position: relative;
    z-index: 99;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .info-wrap {
      flex: 1;
      padding: 0 24rpx;
    }
    .nickname {
      font-size: 32rpx;
      font-weight: bold;
      .partner{
        width: 104rpx;
        height: 37rpx;
        margin-left: 10rpx;
      }
    }
    .level-wrap {
      display: flex;
      align-items: center;
      color: #fff;
      margin-top: 28rpx;
      font-size: 24rpx;
    }
    .progress-box {
      width: 100rpx;
      margin-right: 20rpx;
    }
  }

  .card {
    position: relative;
    padding: 32rpx 16rpx 0;
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    .title {
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
    }
    .more {
      font-size: 24rpx;
      color: #999;
      display: flex;
      align-items: center;
    }

    .nav-list {
      display: flex;
      margin-top: 32rpx;
      padding: 0 12rpx;
      flex-wrap: wrap;

      .nav-item {
        width: 25%;
        margin-bottom: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .nav-item-c {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        &.order {
          width: 20%;
        }
      }
      .nav-icon {
        width: 58rpx;
        height: 58rpx;
        margin-bottom: 12rpx;
        &.order {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .nav-title {
        font-size: 28rpx;
      }
    }
  }

  .imgs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24rpx;
    .img {
      width: 336rpx;
      height: 144rpx;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
  }
</style>
